<template>
  <div class="answer">
    <div class="title">
      <span class="type">{{ list[pageNum].type === 1 ? "单选题" : "多选题" }}</span>
      {{ pageNum * 1 + 1 }}.{{ list[pageNum].question }} ({{ list[pageNum].score }}分)
    </div>
    <div class="answer-item">
      <answer-item
        :choess="list[pageNum].option"
        :level="list[pageNum].type"
        :answer="list[pageNum].true"
        :score="list[pageNum].score"
        :testType="0"
        :listArr="list"
        :pageNum="pageNum"
        @next="next"
        @pre="pre"
      ></answer-item>
    </div>
  </div>
</template>

<script>
import AnswerItem from "./AnswerItem.vue";
import { Toast } from "vant";
import { reactive, ref, toRefs } from "vue";
export default {
  name: "Answer",
  props: ["list"],
  components: {
    AnswerItem,
  },
  setup(props) {
    const { list } = toRefs(props);
    const pageNum = ref("0");
    const next = () => {
      if (pageNum.value + 1 >= list.value.length) return pageNum.value;
      pageNum.value++;
    };
    const pre = () => {
      if (pageNum.value == 0) return pageNum.value;
      pageNum.value--;
    };
    return {
      next,
      pageNum,
      pre,
      list,
    };
  },
};
</script>

<style lang="scss" scoped>
.answer {
  // height: 100%;
  margin-top: 1rem;
  overflow: auto;
  flex: 1;
  padding: 0 0.2rem;
  .title {
    color: #000;
    font-size: 0.32rem;
    color: #fff;
    line-height: 0.5rem;
    .type {
      background: #06c060;
      padding: 0 0.1rem;
      border-radius: 0.8rem;
    }
  }
}
</style>
